<template>
	<view class="travel-card">
		<view class="card-item" v-for="item in travelList" :key="item.id" @click="toTravelDetail(item)">
			<view>
				<view class="travel-card-img">
					<image :src="'data:image/jpg;base64,'+item.productImage[0]"></image>
				</view>
				<view class="travel-card-intro">{{item.productName}}</view>
				<view class="travel-card-money">￥{{item.productPrice}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		defineProps
	} from "vue";
	const props = defineProps({
		travelList: Array,
	});
	const toTravelDetail = (item) => {
		uni.getStorage({
			key: 'token',
			success: function(res) {
				uni.navigateTo({
					url: '/pages/travelDetail/travelDetail?id=' + item._id
				})
			},
			fail: function() {
				uni.showToast({
					title: '请登录',
					duration: 1000,
					success: function() {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
					}
				});

			}
		});

	}
</script>

<style lang="scss">
	.travel-card {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20upx 20upx;
	}

	.travel-card-img {
		overflow: hidden;
		width: 100%;
		height: 400upx;
		background: #ff763a;

		image {
			width: 100%;
		}
	}

	.travel-card-intro {
		color: #222222;
		font-weight: bold;
	}

	.travel-card-money {
		color: #ff763a;
	}
</style>
